<!--
组件中盒子的背景颜色由 box-bg 决定;
组件中盒子的阴影由 box-shadow 决定;
-->

<script setup lang="ts">
import {StReactCollapse, StIconIconify} from "st-common-ui-vue3"
import 'st-common-ui-vue3/es/components/StReactCollapse/StReactCollapse.css'
import 'st-common-ui-vue3/es/components/StIconIconify/StIconIconify.css'
import {inject, Ref, ref} from "vue"
import {DataTableRowKey} from "naive-ui"
import {isStr, isNone} from 'st-common-core'
import Plus from '@iconify-icons/tabler/plus'
import Refresh from '@iconify-icons/tabler/refresh'
import Trash from "@iconify-icons/tabler/trash"
import AlignRight from '@iconify-icons/tabler/align-right'
import Hierarchy from '@iconify-icons/tabler/hierarchy'
import HierarchyOff from '@iconify-icons/tabler/hierarchy-off'
import ArrowsDiagonal from '@iconify-icons/tabler/arrows-diagonal'
import ArrowsDiagonalMinimize2 from '@iconify-icons/tabler/arrows-diagonal-minimize-2'
import StnCollapsePopBtn from "../StnCollapsePopBtn"
import '../StnCollapsePopBtn/StnCollapsePopBtn.scss'

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StnTableOperations',
})

/**
 * 组件参数
 */
withDefaults(
  defineProps<{
    // 新增按钮文本
    addText?: string;
    // 批量删除按钮文本
    batchDelText?: string;
    // 是否启用在进行树型数据选择的时候是否级联的控制按钮
    cascade?: boolean;
    // 在进行树型数据选择的时候是否级联的控制按钮文本
    cascadeText?: string | string[];
    // 是否启用展开全部可展开的行的控制按钮
    expandAll?: boolean;
    // 是否启用展开全部可展开的行的控制按钮文本
    expandAllText?: string | string[];
    // 刷新按钮文本
    refreshText?: string;
  }>(),
  {
    addText: '新增',
    batchDelText: '批量删除',
    cascade: false,
    cascadeText: '级联选择',
    expandAll: false,
    expandAllText: ['展开', '收起'] as any,
    refreshText: '刷新',
  }
)

/**
 * 组件自定义事件
 */
const emits = defineEmits<{
  /**
   * 新增按钮点击事件
   *
   * @param {"add"} e
   */
  (e: 'add'): void;
  /**
   * 批量删除事件
   *
   * @param {"batchDel"} e 事件名称
   */
  (e: 'batchDel'): void;
  /**
   * 刷新事件
   *
   * @param {"refresh"} e 事件名称
   */
  (e: 'refresh'): void;
}>()

// 注入父组件提供的表格中选中行的 key 组成响应式列表数据
const checkedRowKeys = inject<Ref<DataTableRowKey[]>>('checkedRowKeys') as Ref<DataTableRowKey[]>
// 注入父组件提供的在进行树型数据选择的时候是否级联
const isCascade = inject<Ref<boolean>>('isCascade') as Ref<boolean>

/**
 * 展开所有全部可展开的行
 */
const isExpandAll = ref(false)
// 注入父组件提供的展开所有全部可展开的行的处理函数
const expandAllHandler = inject<() => void>('expandAllHandler') as () => void
// 注入父组件提供的收起所有全部可展开的行的处理函数
const retractAllHandler = inject<() => void>('retractAllHandler') as () => void
// 改变是否展开全部可展开的行
const expandAllChange = () => {
  isExpandAll.value = !isExpandAll.value
  if (isExpandAll.value) {
    if (!isNone(expandAllHandler)) expandAllHandler()
  }
  else {
    if (!isNone(retractAllHandler)) retractAllHandler()
  }
}
</script>

<template>
  <st-react-collapse class="stn-table-operations" :dropdown-z-index="4">
    <template v-slot="{isCollapse}">
      <div class="stn-table-operations__operations">
        <slot name="prefix" :isCollapse="isCollapse"></slot>
        <slot name="add" :isCollapse="isCollapse">
          <StnCollapsePopBtn
            type="primary"
            :is-collapse="isCollapse"
            :btn-text="addText"
            @click="() => emits('add')"
          >
            <template #icon>
              <slot name="add-icon">
                <st-icon-iconify :icon="Plus"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-add" :isCollapse="isCollapse"></slot>
        <slot name="batch-del" :isCollapse="isCollapse">
          <StnCollapsePopBtn
            type="error"
            :btn-disabled="checkedRowKeys.length === 0"
            :is-collapse="isCollapse"
            :btn-text="batchDelText"
            @click="() => emits('batchDel')"
          >
            <template #icon>
              <slot name="batch-del-icon">
                <StIconIconify :icon="Trash"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-batch-del" :isCollapse="isCollapse"></slot>
        <slot name="cascade" :isCollapse="isCollapse" :isCascade="isCascade">
          <StnCollapsePopBtn
            v-if="cascade"
            :is-collapse="isCollapse"
            :btn-text="isStr(cascadeText) ? cascadeText : (isCascade ? cascadeText[0] : cascadeText[1])"
            :dashed="!isCascade"
            @click="() => isCascade = !isCascade"
          >
            <template #icon>
              <slot name="cascade-icon">
                <StIconIconify v-show="isCascade" :icon="Hierarchy"/>
                <StIconIconify v-show="!isCascade" :icon="HierarchyOff"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-cascade" :isCollapse="isCollapse"></slot>
        <slot name="expand-all" :isCollapse="isCollapse" :isExpandAll="isExpandAll">
          <StnCollapsePopBtn
            v-if="expandAll"
            :is-collapse="isCollapse"
            :btn-text="isStr(expandAllText) ? expandAllText : (isExpandAll ? expandAllText[0] : expandAllText[1])"
            :dashed="!isExpandAll"
            @click="expandAllChange"
          >
            <template #icon>
              <slot name="expend-all-icon">
                <StIconIconify v-show="isExpandAll" :icon="ArrowsDiagonal"/>
                <StIconIconify v-show="!isExpandAll" :icon="ArrowsDiagonalMinimize2"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-expend-all" :isCollapse="isCollapse"></slot>
        <slot name="refresh" :isCollapse="isCollapse">
          <StnCollapsePopBtn
            :is-collapse="isCollapse"
            :btn-text="refreshText"
            @click="() => emits('refresh')"
          >
            <template #icon>
              <slot name="refresh-icon">
                <st-icon-iconify :icon="Refresh"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix" :isCollapse="isCollapse"></slot>
      </div>
    </template>
    <template #dropdown-icon>
      <div class="stn-table-operations__dropdown-icon">
        <slot name="dropdown-icon">
          <st-icon-iconify :icon="AlignRight" :width="22" :height="22"/>
        </slot>
      </div>
    </template>
    <template #dropdown-content>
      <div
        class="stn-table-operations__operations-dropdown box-bg box-shadow"
      >
        <slot name="prefix"></slot>
        <slot name="add">
          <StnCollapsePopBtn
            type="primary"
            block
            :btn-text="addText"
            @click="() => emits('add')"
          >
            <template #icon>
              <slot name="add-icon">
                <st-icon-iconify :icon="Plus"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-add"></slot>
        <slot name="batch-del">
          <StnCollapsePopBtn
            type="error"
            :btn-disabled="checkedRowKeys.length === 0"
            block
            :btn-text="batchDelText"
            @click="() => emits('batchDel')"
          >
            <template #icon>
              <slot name="batch-del-icon">
                <StIconIconify :icon="Trash"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-batch-del"></slot>
        <slot name="cascade" :isCascade="isCascade">
          <StnCollapsePopBtn
            v-if="cascade"
            block
            :btn-text="isStr(cascadeText) ? cascadeText : (isCascade ? cascadeText[0] : cascadeText[1])"
            :dashed="!isCascade"
            @click="() => isCascade = !isCascade"
          >
            <template #icon>
              <slot name="cascade-icon">
                <StIconIconify v-show="isCascade" :icon="Hierarchy"/>
                <StIconIconify v-show="!isCascade" :icon="HierarchyOff"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-cascade"></slot>
        <slot name="expand-all" :isExpandAll="isExpandAll">
          <StnCollapsePopBtn
            v-if="expandAll"
            block
            :btn-text="isStr(expandAllText) ? expandAllText : (isExpandAll ? expandAllText[0] : expandAllText[1])"
            :dashed="!isExpandAll"
            @click="expandAllChange"
          >
            <template #icon>
              <slot name="expend-all-icon">
                <StIconIconify v-show="isExpandAll" :icon="ArrowsDiagonal"/>
                <StIconIconify v-show="!isExpandAll" :icon="ArrowsDiagonalMinimize2"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix-expend-all"></slot>
        <slot name="refresh">
          <StnCollapsePopBtn
            block
            :btn-text="refreshText"
            @click="() => emits('refresh')"
          >
            <template #icon>
              <slot name="refresh-icon">
                <st-icon-iconify :icon="Refresh"/>
              </slot>
            </template>
          </StnCollapsePopBtn>
        </slot>
        <slot name="affix" :isCollapse="false"></slot>
      </div>
    </template>
  </st-react-collapse>
</template>

<style scoped>
.stn-table-operations {

  .stn-table-operations__operations {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }

  .stn-table-operations__dropdown-icon {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
  }

  .stn-table-operations__operations-dropdown {
    padding: 0.75rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
  }
}
</style>
